<template>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- :class="{ completed: item.done }" -->
      <li
        :class="{ completed: item.done }"
        class="todo"
        v-for="item in todoList"
        :key="item.id"
      >
        <div>
          <input class="toggle" type="checkbox" :checked="item.done" />
          <label>{{ item.text }}</label>
          <button class="destroy" @click="del(index)"></button>
        </div>
        <input class="edit" type="text" style="display: none" />
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { TodoListType } from "../types/todomvc";
import useTodoStore from "../stores/useTodoStore";

let store = useTodoStore();

withDefaults(
  defineProps<{
    todoList: TodoListType;
  }>(),
  { todoList: () => [] }
);
const del = (idx: number) => {
  store.del(idx);
};
</script>

